<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/china.js"></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/world.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.2/vue.min.js"></script>
<template>
  <div>
    <div>
      <el-form :inline="true" v-loading="listLoading":model="formInline" class="demo-form-inline">
        <el-form-item label="请输入要查询的公司名字：">
          <el-input v-model="user" placeholder="Companyname"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getCompanyYearAddEcharts(),getCompanyLawEcharts(),getInventorEcharts(),getCountryEcharts(),getLeidaEcharts()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 1.历年专利数量-柱状图+增长折线图 -->
    <div id="yearadd" class="chart-container" style="width:1280px; height:768px;margin:auto;top:80px;" />
    <div style="height:78px" />
    <!-- 2.法律状态图表 -->
    <div id="law" class="chart-container" style="width:1280px; height:768px;margin:auto;top:80px;" />
    <div style="height:78px" />
    <!-- 3.发明人图-->
    <div id="inventor" class="chart-container" style="width:1280px; height:768px;margin:auto;top:80px;" />
    <div style="height:78px" />
    <div id="country" class="chart-container" style="width:1280px; height:768px;margin:auto;top:80px;" />
    <div style="height:78px" />
    <div id="leida" class="chart-container" style="width:1280px; height:768px;margin:auto;top:80px;" />
    <div style="height:78px" />
  </div>
</template>

<script>
  import * as echarts from "echarts";
  import 'echarts/map/js/china.js';
  import 'echarts/map/js/world.js';
  import "echarts-wordcloud/dist/echarts-wordcloud";
  import company from "@/api/chapter/company";

  export default {
    data() {
      return {
        listLoading: false,
        user: "",
        data: {},
        temp_year: {}
      }
    },
    created() {
      //页面渲染之前执行，调用methods定义的方法
      //调用
      // this.getCompanyCharts();
    },
    mounted() {
      // this.draw1();
    },
    methods: {
      //1.年增长图
      getCompanyYearAddEcharts() {
        company.getCompanyYearAddEcharts(this.user).then((res) => {
          var chart_yearadd = echarts.init(
            document.getElementById('yearadd'), 'white', {
              renderer: 'canvas'
            });
          var data = res.data.data;

          // 1.历年专利数量-柱状图+增长折线图
          var temp_year = data.yearadd;
          var temp_type = data["type"];
          var sq = temp_type["发明申请"]
          var sy = temp_type["实用新型"]
          var wg = temp_type["发明授权"]
          //这个循环主要是为了排除年增长为空的情况
          var yeardata = [];
          var sqdata = []
          var sydata = []
          var wgdata = []
          for (var i = 2006; i < 2021; i++) {
            //年增长的判断
            if (temp_year.hasOwnProperty(i.toString())) {
              yeardata.push(temp_year[i])
            } else {
              yeardata.push(0)
            }
            //发明申请增长的判断
            if (sq.hasOwnProperty(i.toString())) {
              sqdata.push(sq[i])
            } else {
              sqdata.push(0)
            }
            //实用新型年增长的判断
            if (sy.hasOwnProperty(i.toString())) {
              sydata.push(sy[i])
            } else {
              sydata.push(0)
            }
            //发明授权年增长的判断
            if (wg.hasOwnProperty(i.toString())) {
              wgdata.push(wg[i])
            } else {
              wgdata.push(0)
            }

          }
          // 1.1图表配置
          var option_yearadd = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            toolbox: {
              feature: {
                dataView: {
                  show: true,
                  readOnly: false
                },
                magicType: {
                  show: true,
                  type: ['line', 'bar']
                },
                restore: {
                  show: true
                },
                saveAsImage: {
                  show: true
                }
              }
            },
            legend: {
              data: ['发明申请', '发明授权', '实用新型', '年增长']
            },
            xAxis: [{
              type: 'category',
              data: ['2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016',
                '2017', '2018', '2019', '2020'
              ],
              axisPointer: {
                type: 'shadow'
              }
            }],
            yAxis: [{
                type: 'value',
                name: '数量',
                // min: 0,
                // max: 50,
                // interval: 10,
                axisLabel: {
                  formatter: '{value}'
                },
              },

            ],
            series: [{
                name: '年增长',
                type: 'line',
                smooth: true, //折线图平滑效果
                data: yeardata
              },
              {
                name: '发明申请',
                type: 'bar',
                data: sqdata
              },
              {
                name: '发明授权',
                type: 'bar',
                data: wgdata
              },
              {
                name: '实用新型',
                type: 'bar',
                data: sydata
              },

            ]
          };
          chart_yearadd.setOption(option_yearadd);
        }).catch((err) => {
          console.log(err);
        })
      },
      //2.法律图
      getCompanyLawEcharts(){
        company.getCompanyLawEcharts(this.user).then((res) => {
                var data = res.data.data;
                console.log("data");
                console.log(data);
                var lawtemp=data['law'];
                console.log("lawtemp");
                console.log(lawtemp.length);
                console.log(lawtemp);
                var validtemp=data['valid'];
                console.log("validtemp")
                console.log(validtemp)
                var lawdata=[];
                for (var i = 0; i < lawtemp.length; i++) {
                    console.log("lawtemp" + i)
                    console.log(lawtemp[i])
                    lawdata.push({
                        name:lawtemp[i].name,
                        value: lawtemp[i].value
                    })
                }
                console.log(lawdata)
                var validdata=[];
                for (var i = 0; i < validtemp.length; i++) {
                   validdata.push({
                        name:validtemp[i].name,
                        value: validtemp[i].value
                    })
                }
                console.log(validdata)
                var chart_law = echarts.init(
                    document.getElementById('law'), 'white', {renderer: 'canvas'});
                var option_law={
                    legend: {                       //图例
                        show:true,                   //是否显示图例
                        orient: 'vertical',           //布局方向
                        x: 'left',                    //图例相对位置
                        top:'15%',
                        left:'10%',
                    },
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    color: [
                        "#c23531",
                        "#2f4554",
                        "#61a0a8",
                        "#d48265",
                        "#749f83",
                        "#ca8622",
                        "#bda29a",
                        "#6e7074",
                        "#546570",
                        "#c4ccd3",
                        "#f05b72",
                        "#ef5b9c",
                        "#f47920",
                        "#905a3d",
                        "#fab27b",
                        "#2a5caa",
                        "#444693",
                        "#726930",
                        "#b2d235",
                        "#6d8346",
                        "#ac6767",
                        "#1d953f",
                        "#6950a1",
                        "#918597"
                    ],
                    "tooltip": {
                        "show": true,
                        "trigger": "item",
                        "triggerOn": "mousemove|click",
                        "axisPointer": {
                            "type": "line"
                        },
                        "showContent": true,
                        "alwaysShowContent": false,
                        "showDelay": 0,
                        "hideDelay": 100,
                        "textStyle": {
                            "fontSize": 14
                        },
                        "borderWidth": 0,
                        "padding": 5
                    },
                    series: [                       //内容
                        {
                            name:'有效性占比',      //内容标题
                            type:'pie',                 //图标样式
                            selectedMode: 'single',     //选中模式：单选
                            radius: ['20%', '50%'],
                            center: [
                                "60%",
                                "50%"
                            ],
                            label: {                    //标签
                                normal: {
                                    position: 'inner'       //标签位置：内部
                                }
                            },

                            labelLine: {        //提示框
                                normal: {
                                    show: true     //是否显示
                                }
                            },
                              //颜色
                            //内容名称
                            data:validdata
                        },
                        {
                            name:'法律状态占比',
                            type:'pie',
                            radius: ['50%', '75%'],
                            center: [
                                "60%",
                                "50%"
                            ],
                            labelLine:{
                                normal:{
                                    length:2,
                                }
                            },
                            data:lawdata,
                            label:
                                {
                                    normal: {
                                        textStyle: {
                                            color: '#aaa'     //提示框字体颜色
                                        }
                                    }
                                },
                        }],

                };
                chart_law.setOption(option_law);
      }).catch((err) => {
          console.log(err);
        })
      },
      //3.发明人的图
      getInventorEcharts(){
        company.getInventorEcharts(this.user).then((res) =>{
          var data = res.data.data;
          console.log(data);
          var inventortemp=data.inventor;
          var inventor=[]
          var inventordata=[]
          console.log(inventortemp)
          for (var i = 0; i < (inventortemp.length>10?10:inventortemp.length); i++) {
                    inventor.push(inventortemp[i].name)
                    inventordata.push(inventortemp[i].value)

                }
          console.log(inventor);
          console.log(inventordata);
          var chart_inventor = echarts.init(document.getElementById('inventor'), 'white', {renderer: 'canvas'});
          var option_inventor = {
                    color: ['#c23531','#2f4554', '#61a0a8'],
                    title: {
                        text: '发明人统计',
                        fontSize:30
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['拥有的专利数量']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: inventor
                    },
                    series: [
                        {
                            name: '专利拥有数量',
                            type: 'bar',
                            data: inventordata,
                            barCategoryGap: "40%",
                            barGap: "30%",
                        },

                    ]
                };
                chart_inventor.setOption(option_inventor);
        })
      },
      //4.国家的图
      getCountryEcharts(){
        this.listLoading = true;
        company.getCountryEcharts(this.user).then((res) =>{
          var data = res.data.data;
          this.listLoading = false;
          var countrytemp=data['country'];
                var country=[]
                var countrydata=[]
                console.log(countrytemp)
                country.push("美国");
                countrydata.push(0);
                country.push("韩国");
                countrydata.push(0);
                country.push("日本");
                countrydata.push(0);
                country.push("巴西");
                countrydata.push(0);
                country.push("加拿大");
                countrydata.push(0);
                var len=countrytemp.length>10?10:countrytemp.length
                for (var i = len; i >0; i--) {
                    country.push(countrytemp[i-1].name)
                    countrydata.push(countrytemp[i-1].value)

                }


                console.log(country)
                console.log(countrydata)
                var chart_country = echarts.init(
                    document.getElementById('country'), 'white', {renderer: 'canvas'});
                var option_country = {
                    color: ['#2f4554', '#61a0a8','#c23531'],
                    title: {
                        text: '国家及地区统计',
                        fontSize:30
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['拥有的专利数量']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: country
                    },
                    series: [
                        {
                            name: '专利拥有数量',
                            type: 'bar',
                            data: countrydata,
                            barCategoryGap: "40%",
                            barGap: "30%",
                        },

                    ]
                };
                chart_country.setOption(option_country);
                
        })
      },
      //5.雷达对比图
      getLeidaEcharts(){
        
        //雷达图（这里是静态的，腾讯和百度）
        var chart_leida = echarts.init(
                    document.getElementById('leida'), 'white', {renderer: 'canvas'});
                var option_leida = {
                    title: {
                        text: '行业比较图'
                    },
                    legend: {
                        data: ['腾讯', '百度']
                    },
                    radar: {
                        // shape: 'circle',
                        indicator: [
                            { name: '专利数量', max: 6500},
                            { name: '专利增长速度', max: 16000},
                            { name: '信息技术', max: 30000},
                            { name: '高价值估量', max: 38000},
                            { name: '研发投入', max: 52000},
                            { name: '人才增长', max: 25000}
                        ]
                    },
                    series: [{
                        name: '腾讯 vs 百度',
                        type: 'radar',
                        data: [
                            {
                                value: [4200, 3000, 20000, 35000, 50000, 18000],
                                name: '该公司'
                            },
                            {
                                value: [5000, 14000, 28000, 26000, 42000, 21000],
                                name: '行业平均'
                            }
                        ]
                    }]
                };
                chart_leida.setOption(option_leida);
      }
    }
  }
</script>
<style scoped>
</style>
